<template>
  <MyHeadBus title="找回密码">
    <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)" />
  </MyHeadBus>
  <p>找回密码</p>
  <van-field
    v-model="phone"
    label="手机号"
    placeholder="请输入手机号"
    :rules="[{ required: true }, { pattern: phoneReg }]"
    show-error
    @blur="phoneBlur"
  />
  <van-field
    v-model="code"
    center
    clearable
    label="短信验证码"
    placeholder="请输入短信验证码"
    :rules="[{ required: true }, { pattern: codeReg }]"
  >
    <template #button>
      <van-button size="small" type="primary" @click="sendCode"
        >发送验证码</van-button
      >
    </template>
  </van-field>
  <van-field
    v-model="password"
    :type="passwordVisibile"
    required
    label="新密码"
    placeholder="请输入密码"
    error-message="请输入正确格式的密码"
    right-icon="smile-o"
    @click-right-icon="iconClick"
  />
  <div class="twoDiv">
    <router-link to="/register" style="color: red">注册</router-link>
    <router-link to="/login">登录</router-link>
  </div>
  <div class="btnbox">
    <van-button type="primary" size="normal" @click="loginBtnPhone"
      >登录</van-button
    >
    <van-button type="primary" size="normal">重置</van-button>
  </div>
</template>
<script setup>
import { ref } from "vue";
import {
  sentCode,
  verifyCode,
  findUserApi,
  changepassApi,
} from "../../api/login";

const phone = ref(""); //手机号
const phoneReg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/; //手机号正则
const code = ref(""); //验证码
const codeReg = /[0-9]{4}/; //短信验证码正则
const password = ref("");
const flag = ref(false);
const passwordVisibile = ref("password");
//密码登录是否可见
const iconClick = () => {
  flag.value = !flag.value;
  console.log(flag.value);
  !flag.value
    ? (passwordVisibile.value = "password")
    : (passwordVisibile.value = null);
};
// //手机登录
const phoneBlur = () => {
  //手机号失焦
  if (phone.value && phoneReg.test(phone.value)) {
    console.log("手机号符合规定");
  } else {
    console.log("手机号不符合规定");
  }
};
//手机登录发送验证码
const sendCode = async () => {
  if (phone.value && phoneReg.test(phone.value)) {
    const res = await sentCode({
      phone: phone.value,
    });
    console.log(res);
  } else {
    console.log("手机登录有问题");
  }
};
//手机找回密码设置新密码  18571400466   8237 111 a147258
const loginBtnPhone = async () => {
  console.log(22);
  const findUserApiRes = await findUserApi({ phone: phone.value }); //查找是否有该用户
  console.log(findUserApiRes);
  if (findUserApiRes.data.code) {
    const res = await verifyCode({
      phone: phone.value,
      captcha: code.value,
    });
    console.log(res);
    console.log("验证验证码");
    if (res.data.data && password.value) {
      const res = await changepassApi({
        phone: phone.value,
        password: password.value,
      });
      console.log(res, "111111");
      if (res.data.code === 200) {
        console.log(res.data.msg);
      }
    } else {
      console.log("验证码不正确 重新输入");
    }
  } else {
    console.log("跳转注册页");
  }
};
</script>

<style>
.twoDiv {
  display: flex;
  justify-content: space-between;
}
.twoDiv a {
  display: block;
}
.btnbox {
  display: flex;
  justify-content: space-evenly;
}
</style>
